<template>
    <div class="app-container">
      <div class="filter-container">
        <el-input
          v-model="listQuery.supplierName"
          placeholder="请输入名字"
          style="width: 200px"
          class="filter-item"
          clearable
          @keyup.enter.native="handleFilter"
        />
        <el-select
          v-model="listQuery.groups"
          placeholder="分组查询"
          style="width: 200px;margin-left: 10px"
          class="filter-item"
          clearable
        >
          <el-option :value="11">11</el-option>
          <el-option :value="22">22</el-option>
          <el-option
            v-for="item in categoryList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          style="margin-left: 15px"
          @click="handleFilter"
        >查询</el-button>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          style="margin-left: 5px"
          @click="handleCreate"
        >新增</el-button>
      </div>
      <el-table
        :key="tableKey"
        v-loading = 'listLoading'
        :data="list"
        style="width:100%"
        border
        fit
        highlight-current-row
        height="600px"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="supplier_name"
          label="通道名称"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="urlStr"
          label="绑定IP"
          width="320"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="用户名称"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="groups"
          label="用户分组"
          width="100"
        ></el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope=" { row } ">
            <el-button
              size="mini"
              @click="editItem(row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteItem"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="80"
        @pagination = 'handleSizeChange'
      />
    </div>
</template>

<script>
import pagination from '@/components/Pagination/index'
import waves from '@/directive/waves/waves'
import { getCategoryList } from '@/api/message-aisle'
export default {
  components:{
    pagination
  },
  directives:{ waves },
  data(){
    return{
      listLoading:false,
      tableKey:'0',
      listQuery: {},
      categoryList: [],
      list: [],
      textList:[
        {'id':'1','supplier_name':'测试通道1','urlStr':'www.baidu.com/ceshi/books','userName':'湖北用户','groups':'短信组'},
        {'id':'2','supplier_name':'测试通道2','urlStr':'www.baidu.com/ceshi/books/sss','userName':'用户159','groups':'彩信'},
        {'id':'3','supplier_name':'测试通道3','urlStr':'www.baidu.com/ceshi/books/fff/test','userName':'北京用户','groups':'群发'}
      ]
    }
  },
  mounted() {
    //获取categoryList放到分类查询数据中
    this.getCategoryList();
    this.getList();
  },
  methods:{
    handleSizeChange(val){
      console.log('handleSizeChange',val)
    },
    deleteItem(){
      this.$message({
        type: 'error',
        message: '触动删除方法'
      })
    },
    editItem(row){
      console.log('removeItem', row);
      // this.$router.push(`/user-pricing/edit/${row.id}`)
      this.$router.push({
          name: 'editUserPricing',
          params:{
            id: row.id
          }
      })
      this.$message({
        type: 'success',
        message: '触动编辑模块'
      })
    },
    getList(){
      this.list = this.textList;
      this.listLoading = false
      console.log(this.list)
    },
    getCategoryList(){
      console.log("获取所有的分组")
      // getCategoryList().then(response =>{
      //   this.categoryList = response.data
      // })
    },
    handleFilter(){
      console.log('handleFilter', this.listQuery)
    },
    handleCreate(){
      this.$router.push('/editUserPricing/add')
    }
  }
}
</script>

<style scoped>

</style>
